<!-- 图表下部分bottom1 top10商品销售额 -->
<div>
  <div class="cb_title">
    <!-- 图标 -->
    <div class="icon"></div>
    <!-- 文字 -->
    <div class="text">top10商品销售额</div>
  </div>
  <div id="bottom1_column" class="plot_box"></div>
</div>

<!-- 获取数据绘制图表 -->
<script>
  const bottom1Data = [
    {
      "time": "2023-11-01",
      "value": 3.2,
      "type": "羊肉汤"
    },
    {
      "time": "2023-11-02",
      "value": 3.3,
      "type": "羊肉汤"
    },
    {
      "time": "2023-11-03",
      "value": 3.5,
      "type": "羊肉汤"
    },
    {
      "time": "2023-11-01",
      "value": 2.2,
      "type": "刀削面"
    },
    {
      "time": "2023-11-02",
      "value": 2.1,
      "type": "刀削面"
    },
    {
      "time": "2023-11-03",
      "value": 1.9,
      "type": "刀削面"
    },
    {
      "time": "2023-11-01",
      "value": 3.5,
      "type": "火烧"
    },
    {
      "time": "2023-11-02",
      "value": 3.4,
      "type": "火烧"
    },
    {
      "time": "2023-11-03",
      "value": 3.7,
      "type": "火烧"
    }
  ]

  const stackedColumnPlot = new Column('bottom1_column', {
    data:bottom1Data,
    isStack: true,
    xField: 'time',
    yField: 'value',
    seriesField: 'type',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'bottom', 'middle'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        { type: 'interval-adjust-position' },
        // 数据标签防遮挡
        { type: 'interval-hide-overlap' },
        // 数据标签文颜色自动调整
        { type: 'adjust-color' },
      ],
    },
  });

  stackedColumnPlot.render();
</script>